<template>
	<div>
		<el-dialog title="修改" :visible.sync="editorVisible" width="30%" :before-close="closeEditorRotation" @open="opendEnd">
			<el-form :model="rotationList" ref="udpRotation" label-width="100px">
			  <el-form-item label="图片名称" prop="bannerName" :rules="[
			        { required: true, message: '请输入图片名称', trigger: 'blur' },
			      ]">
			  	<el-input type="text" v-model="rotationList.bannerName" placeholder="请输入图片名称"></el-input>
			  </el-form-item>

			  <el-form-item label="显示状态" prop="status" :rules="[
			        { required: true, message: '请选择是否启用', trigger: 'blur' },
			      ]">
			    <el-switch
			      v-model="rotationList.onstatus" @change="onstatus(rotationList.onstatus)"
			      active-text="启用" inactive-text="禁用">
			    </el-switch>
			  </el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeEditorRotation">取 消</el-button>
				<el-button type="primary" @click="udpRotation('udpRotation')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: "",
		props: ["editorVisible","editorObj"],
		data() {
			return {
				rotationList: {
					bannerName: "",
				  bannerImg:"",
				  //以下两个变量用于判断用户状态
				  status:0,
				  onstatus:false,
				},
			}
		},
		methods: {
      /* */
      //需要等待dialog 打开完毕后 在金数据渲染
      //设置权限下拉框的默认值
      opendEnd(){
        this.rotationList.bannerId = this.$props.editorObj.bannerId
        this.rotationList.bannerName = this.$props.editorObj.bannerName
        this.rotationList.status = this.$props.editorObj.status
        this.onstatus(this.$props.editorObj.status)
      },
      //判断显示状态
      onstatus(status){
        if(status===1){
          this.rotationList.onstatus=true
        }else if(status===0){
          this.rotationList.onstatus=false
        }
      },
      //清除文本框数据，返回相对应文本框的值
      clearData(){
          this.rotationList={
            bannerName: "",
            bannerImg:"",
            //以下两个变量用于判断用户状态
            status:0,
            onstatus:false,
          }
      },
      //设置关闭添加页面方法
			closeEditorRotation() {
        // this.clearData()
        this.opendEnd()
				this.$parent.editorVisible = false
			},
      //执行添加方法
			udpRotation(params) {
				var self = this
				this.$refs[params].validate((valid) => {
					if (valid) {
						var onlineManager = JSON.parse(sessionStorage.getItem("manager"))
            //获取当前页
            var page = sessionStorage.getItem("page")
            //通过显示状态进行显示数据传值
            if(self.rotationList.onstatus===true){
              self.rotationList.status=1
            }else{
              self.rotationList.status=0
            }
            // 检测输入的数据中是否存在空格
            var bannerName = this.rotationList.bannerName
            if(bannerName==null){
              bannerName=''
            }
            if(bannerName.split(" ").length==1){
              self.$http({
                url: "/api/CakeShop/Banner/udpBanner",
                method: "post",
                headers: {
                	token: onlineManager.token
                },
                data: {
                  bannerId:self.rotationList.bannerId,
                  bannerName:self.rotationList.bannerName,
                  status: self.rotationList.status,
                },
              }).then(function(res) {
                // console.log(res)
                //判断数据是否存在
                if (res.data.udpSuccNum>0) {
                  self.$message({
                    message: res.data.msg,
                    type: 'success',
                    onClose: function() {
                      //添加完毕后清楚文本框中内容
                      self.clearData()
                      //关闭修改界面
                      self.closeEditorRotation()
                      //添加完数据返回首页
                      self.$parent.getRotationList(page)
                    }
                  });
                }
              })
            }else{
              self.$message({
                duration: 1500,
                message: "用户名中存在非法字符空格!",
                type: "error",
                onClose: function() {
                  self.loading = false;
                },
              });
            }
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		}
	}
</script>
<style>
</style>
